<!--
 * @Author: 程家兴
 * @Date: 2022-08-15 08:41:08
 * @LastEditors: 程家兴
 * @LastEditTime: 2022-08-20 14:44:58
 * @FilePath: \bdh-pumping-web\src\views\components\intelligentIrrigation\jjDialog.vue
 * @Description: 
-->
<template>
  <div class="jjDialog">
    <el-dialog
      title="机井"
      :center="dialogTitleAlign"
      :visible.sync="visible"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
    >
      <div class="dialogClose" @click="dialogCloseClick"></div>
      <div v-if="dialogCurrentControl === 'yckz'">
        <div class="module_top">
          <div class="module_top_name">{{ jjDialogData.name }}</div>
          <div class="module_top_number">
            {{ `/${jjDialogData.number}` }}
          </div>
          <div class="module_top_button_qd">
            <div class="module_top_button_qd_icon"></div>
            <div class="module_top_button_qd_name" @click="open">启动</div>
          </div>
          <div class="module_top_button_jt">
            <div class="module_top_button_jt_icon"></div>
            <div class="module_top_button_jt_name" @click="close">急停</div>
          </div>
          <div class="module_top_button_zdkz" @click="open">最大开闸</div>
        </div>
        <div class="module_zb">
          <div class="module_zb_content">
            <div class="module_zb_content_icon ll"></div>
            <div class="module_zb_content_value">{{ jjDialogData.ll }}</div>
            <div class="module_zb_content_name">流量（m³/s）</div>
          </div>
          <div class="module_zb_content">
            <div class="module_zb_content_icon ckyl"></div>
            <div class="module_zb_content_value">
              {{ jjDialogData.ckyl }}
            </div>
            <div class="module_zb_content_name">出口压力（kpa）</div>
          </div>
          <div class="module_zb_content">
            <div class="module_zb_content_icon sw"></div>
            <div class="module_zb_content_value">{{ jjDialogData.sw }}</div>
            <div class="module_zb_content_name">水温（℃）</div>
          </div>
          <div class="module_zb_content">
            <div class="module_zb_content_icon ljsl"></div>
            <div class="module_zb_content_value">
              {{ jjDialogData.ljsl }}
            </div>
            <div class="module_zb_content_name">累计水量（m）</div>
          </div>
        </div>
        <div class="module_title">
          <div class="title">
            <div class="titleIcon"></div>
            <div class="titleContent">标题标题</div>
          </div>
          <div class="title">
            <div class="titleIcon"></div>
            <div class="titleContent">标题标题</div>
          </div>
        </div>
        <div class="moduleContent">
          <div class="moduleContentSwt">三维图</div>
          <div class="moduleContentVideo">视频</div>
        </div>
      </div>
      <div v-else>
        <div class="module_search">
          <div class="module_search_word">采集时间：</div>
          <el-date-picker v-model="startDate" type="date"> </el-date-picker>
          <div class="module_search_word" :style="{ margin: '0 15px' }">至</div>
          <el-date-picker v-model="endDate" type="date"> </el-date-picker>
          <div :style="{ marginLeft: '18px' }">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
          </div>
        </div>
        <div class="module_table">
          <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column prop="mc" label="名称"> </el-table-column>
            <el-table-column prop="gldw" label="管理单位"> </el-table-column>
            <el-table-column prop="cjsj" label="采集时间"> </el-table-column>
            <el-table-column prop="gsll" label="过水流量（㎡/s）">
            </el-table-column>
            <el-table-column prop="sw" label="水位（m）"> </el-table-column>
            <el-table-column prop="ckyl" label="出口压力（kpa）">
            </el-table-column>
            <el-table-column prop="ljsl" label="累计水量（m）">
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-size="10"
            layout=" prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <div class="pagination_total">
            共
            <span class="pagination_total_num">{{ total }}</span>
            条
          </div>
        </div>
      </div>
      <div class="module_button">
        <div class="control_module" @click="dialogControlChange('yckz')">
          <div
            class="control_icon"
            :class="
              dialogCurrentControl === 'yckz' ? 'yckz_icon_active' : 'yckz_icon'
            "
          ></div>
          <div
            :class="
              dialogCurrentControl === 'yckz'
                ? 'control_name_active'
                : 'control_name'
            "
          >
            远程控制
          </div>
        </div>
        <div class="control_module" @click="dialogControlChange('xsmx')">
          <div
            class="control_icon"
            :class="
              dialogCurrentControl === 'xsmx' ? 'xsmx_icon_active' : 'xsmx_icon'
            "
          ></div>
          <div
            :class="
              dialogCurrentControl === 'xsmx'
                ? 'control_name_active'
                : 'control_name'
            "
          >
            需水模型
          </div>
        </div>
        <div class="control_module" @click="dialogControlChange('gjgl')">
          <div
            class="control_icon"
            :class="
              dialogCurrentControl === 'gjgl' ? 'gjgl_icon_active' : 'gjgl_icon'
            "
          ></div>
          <div
            :class="
              dialogCurrentControl === 'gjgl'
                ? 'control_name_active'
                : 'control_name'
            "
          >
            告警管理
          </div>
        </div>
        <div class="control_module" @click="dialogControlChange('lssj')">
          <div
            class="control_icon"
            :class="
              dialogCurrentControl === 'lssj' ? 'lssj_icon_active' : 'lssj_icon'
            "
          ></div>
          <div
            :class="
              dialogCurrentControl === 'lssj'
                ? 'control_name_active'
                : 'control_name'
            "
          >
            历史数据
          </div>
        </div>
        <div class="control_module" @click="dialogControlChange('czjl')">
          <div
            class="control_icon"
            :class="
              dialogCurrentControl === 'czjl' ? 'czjl_icon_active' : 'czjl_icon'
            "
          ></div>
          <div
            :class="
              dialogCurrentControl === 'czjl'
                ? 'control_name_active'
                : 'control_name'
            "
          >
            操作记录
          </div>
        </div>
        <div class="control_module" @click="dialogControlChange('whjl')">
          <div
            class="control_icon"
            :class="
              dialogCurrentControl === 'whjl' ? 'whjl_icon_active' : 'whjl_icon'
            "
          ></div>
          <div
            :class="
              dialogCurrentControl === 'whjl'
                ? 'control_name_active'
                : 'control_name'
            "
          >
            维护记录
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
import { message } from 'ant-design-vue'
export default {
  components: {},
  props: ["visible"],
  data() {
    return {
      // 弹窗配置
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      dialogTitleAlign: true,
      //   当前显示的功能
      dialogCurrentControl: "yckz",
      // 机井弹出框数据
      //   机井远程控制页面数据
      jjDialogData: {
        name: "一体化智能机井",
        number: "15152214221452",
        ll: "3.002",
        ckyl: "3.002",
        sw: "25",
        ljsl: "156584",
      },
      // 表格查询起止时间
      startDate: "",
      endDate: "",
      currentPage: 1,
      tableData: [],
      total: 0,
      gjglTableData: [
        {
          mc: "告警管理",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
      ],
      lssjTableData: [
        {
          mc: "历史数据",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
      ],
      czjlTableData: [
        {
          mc: "操作记录",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
      ],
      whjlTableData: [
        {
          mc: "维护记录",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
        {
          mc: "名称名称",
          gldw: "名称名称",
          cjsj: "2020-02-06",
          gsll: "500",
          sw: "500",
          ckyl: "500",
          ljsl: "500",
        },
      ],
      gjglTotal: 50,
      lssjTotal: 50,
      czjlTotal: 50,
      whjlTotal: 50,
    };
  },
  computed: {},

  methods: {
    open() {
      postAction('/jijing/open').then(res => {
      
      
        if (res.code != 200) {
          message.error(res.message)
        } else {
          message.success(res.message)
        }
      })
    },
    close() {
      postAction('/jijing/close').then(res => {
        console.log(res)
        if (res.code != 200) {
          message.error(res.message)
        } else {
          message.success(res.message)
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    dialogControlChange(val) {
      // 点击需水模型，弹出一个新窗口
      if (val === "xsmx") {
        window.open("https://www.baidu.com/", "_blank");
      }
      this.dialogCurrentControl = val;
      if (val === "gjgl") {
        this.tableData = this.gjglTableData;
        this.total = this.gjglTotal;
      } else if (val === "lssj") {
        this.tableData = this.lssjTableData;
        this.total = this.lssjTotal;
      } else if (val === "czjl") {
        this.tableData = this.czjlTableData;
        this.total = this.czjlTotal;
      } else if (val === "whjl") {
        this.tableData = this.whjlTableData;
        this.total = this.whjlTotal;
      }
    },
    dialogCloseClick() {
      this.dialogCurrentControl = "yckz";
      this.$emit("close");
    },
  },

  created() {},
};
</script>

<style lang="less" scoped>
.jjDialog {
  position: relative;
  .dialogClose {
    width: 29px;
    height: 29px;
    background: url("../../../assets/images/intelligentIrrigation/dialogClose.png");
    background-size: 100% 100%;
    position: absolute;
    right: 27px;
    top: 30px;
    cursor: pointer;
  }
  .module_top {
    display: flex;
    .module_top_name {
      font-size: 26px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
      line-height: 26px;
      letter-spacing: 1.3px;
      margin: 5px 10px 0 32px;
    }
    .module_top_number {
      font-size: 20px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: bold;
      text-align: center;
      color: rgba(255, 255, 255, 0.57);
      line-height: 26px;
      letter-spacing: 1px;
      margin-right: 34px;
      margin-top: 8px;
    }
    .module_top_button_qd {
      width: 94px;
      height: 40px;
      background: #009cff;
      border-radius: 4px;
      margin-right: 20px;
      display: flex;
      cursor: pointer;
      .module_top_button_qd_icon {
        width: 21px;
        height: 20px;
        background: url("../../../assets/images/intelligentIrrigation/qdIcon.png");
        background-size: 100% 100%;
        margin: 10px;
      }
      .module_top_button_qd_name {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
      }
    }
    .module_top_button_jt {
      width: 94px;
      height: 40px;
      background: #e22649;
      border-radius: 4px;
      margin-right: 20px;
      display: flex;
      cursor: pointer;
      .module_top_button_jt_icon {
        width: 16px;
        height: 16px;
        background: url("../../../assets/images/intelligentIrrigation/jtIcon.png");
        background-size: 100% 100%;
        margin: 13px 13px 10px 10px;
      }
      .module_top_button_jt_name {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
      }
    }
    .module_top_button_zdkz {
      width: 94px;
      height: 40px;
      background: #00d491;
      border-radius: 4px;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
      line-height: 40px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .module_zb {
    position: absolute;
    top: 168px;
    left: 54px;
    display: flex;
    .module_zb_content {
      width: 207px;
      height: 82px;
      background: url("../../../assets/images/intelligentIrrigation/dialogZb.png");
      background-size: 100% 100%;
      margin-right: 26px;
      position: relative;
      .module_zb_content_icon {
        width: 43px;
        height: 43px;
        position: absolute;
        top: 19px;
        left: 11px;
      }
      .ll {
        background: url("../../../assets/images/intelligentIrrigation/dialogLl.png");
        background-size: 100% 100%;
      }
      .ckyl {
        background: url("../../../assets/images/intelligentIrrigation/dialogCkyl.png");
        background-size: 100% 100%;
      }
      .sw {
        background: url("../../../assets/images/intelligentIrrigation/dialogSw.png");
        background-size: 100% 100%;
      }
      .ljsl {
        background: url("../../../assets/images/intelligentIrrigation/dialogLjsl.png");
        background-size: 100% 100%;
      }
      .module_zb_content_value {
        position: absolute;
        top: 20px;
        left: 70px;
        font-size: 22px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        font-weight: 400;
        text-align: left;
        color: #00fbff;
        line-height: 14px;
      }
      .module_zb_content_name {
        position: absolute;
        top: 47px;
        left: 71px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 14px;
      }
    }
  }
  .module_title {
    display: flex;
    position: absolute;
    top: 270px;
    left: 49px;
    .title {
      width: 438px;
      height: 39px;
      background: url("../../../assets/images/intelligentIrrigation/titleBg.png");
      background-size: 100% 100%;
      display: flex;
      margin-right: 130px;
      .titleIcon {
        width: 18px;
        height: 18px;
        background: url("../../../assets/images/intelligentIrrigation/dqkdIcon.png");
        background-size: 100% 100%;
        margin: 11px 10px 10px 14px;
      }
      .titleContent {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 39px;
      }
    }
  }
  .moduleContent {
    position: absolute;
    top: 322px;
    left: 51px;
    display: flex;
    .moduleContentSwt {
      width: 597px;
      height: 402px;
      background: rgba(1, 31, 86, 0.74);
      border: 1px solid #18faff;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 402px;
      margin-right: 21px;
    }
    .moduleContentVideo {
      width: 480px;
      height: 402px;
      background: rgba(1, 31, 86, 0.74);
      border: 1px solid #18faff;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 402px;
      margin-right: 21px;
    }
  }
  .module_button {
    display: flex;
    position: absolute;
    top: 766px;
    left: 51px;
    .control_module {
      margin-right: 69px;
      cursor: pointer;
      .control_icon {
        width: 124px;
        height: 63px;
      }
      .yckz_icon {
        background: url("../../../assets/images/intelligentIrrigation/dialogYckz.png");
        background-size: 100% 100%;
      }
      .yckz_icon_active {
        background: url("../../../assets/images/intelligentIrrigation/dialogYckzActive.png");
        background-size: 100% 100%;
      }
      .xsmx_icon {
        background: url("../../../assets/images/intelligentIrrigation/dialogXsmx.png");
        background-size: 100% 100%;
      }
      .xsmx_icon_active {
        background: url("../../../assets/images/intelligentIrrigation/dialogXsmxActive.png");
        background-size: 100% 100%;
      }
      .gjgl_icon {
        background: url("../../../assets/images/intelligentIrrigation/dialogGjgl.png");
        background-size: 100% 100%;
      }
      .gjgl_icon_active {
        background: url("../../../assets/images/intelligentIrrigation/dialogGjglActive.png");
        background-size: 100% 100%;
      }
      .lssj_icon {
        background: url("../../../assets/images/intelligentIrrigation/dialogLssj.png");
        background-size: 100% 100%;
      }
      .lssj_icon_active {
        background: url("../../../assets/images/intelligentIrrigation/dialogLssjActive.png");
        background-size: 100% 100%;
      }
      .czjl_icon {
        background: url("../../../assets/images/intelligentIrrigation/dialogCzjl.png");
        background-size: 100% 100%;
      }
      .czjl_icon_active {
        background: url("../../../assets/images/intelligentIrrigation/dialogCzjlActive.png");
        background-size: 100% 100%;
      }
      .whjl_icon {
        background: url("../../../assets/images/intelligentIrrigation/dialogWhjl.png");
        background-size: 100% 100%;
      }
      .whjl_icon_active {
        background: url("../../../assets/images/intelligentIrrigation/dialogWhjlActive.png");
        background-size: 100% 100%;
      }
      .control_name {
        font-size: 22px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #eef8ff;
        line-height: 48px;
      }
      .control_name_active {
        font-size: 22px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #00fbff;
        line-height: 48px;
      }
    }
  }
  .module_search {
    position: absolute;
    top: 111px;
    left: 25px;
    display: flex;
    .module_search_word {
      font-size: 18px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: 400;
      color: #ffffff;
      line-height: 35px;
    }
  }
  .module_table {
    position: absolute;
    top: 165px;
    left: 23px;
    width: 1142px;
    .pagination_total {
      position: absolute;
      bottom: 9px;
      left: 630px;
      font-size: 18px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      line-height: 14px;
      .pagination_total_num {
        font-size: 18px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        font-weight: 400;
        text-align: left;
        color: #00fbff;
        line-height: 14px;
      }
    }
  }
}
</style>
<style lang="less">
.jjDialog .el-dialog {
  width: 1192px;
  height: 908px;
  background: rgba(1, 31, 86, 0.92);
  border: 1px solid #00fbff;
}
.jjDialog .el-dialog__header {
  background: transparent;
  border-bottom: 1px solid #00395f;
  height: 80px;
  .el-dialog__title {
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(
      0deg,
      #1765ff 0%,
      #4a87ff 0%,
      #49d9fe 55%,
      #8fefff 80%
    );
    font-size: 30px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: center;
    line-height: 45px;
  }
  .el-dialog__headerbtn {
    display: none;
  }
}
.module_search .el-input--medium .el-input__inner {
  height: 35px !important;
  line-height: 35px !important;
  border: 1px solid #00fbff !important;
}
.module_search .el-input__prefix {
  color: #00fbff;
}
.module_table .el-table th.el-table__cell.is-leaf,
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background: #001f4f;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #eef8ff;
  line-height: 48px;
  border-right: none;
  border-bottom-color: #5176a0;
}
.module_table
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #07376a;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #eef8ff;
  line-height: 48px;
  border-bottom-color: #5176a0;
  :hover {
  }
}
.module_table
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: #07376a;
}
.module_table .el-table--border {
  border: 1px solid #00fbff;
}
.module_table .el-table::before {
  height: 0;
}
.module_table .el-table thead {
  color: #fff;
}
.module_table .el-table__body tr.current-row > td {
  background: #07376a;
}
.module_table .el-pagination {
  text-align: right;
  margin-top: 25px;
  .btn-prev,
  .el-pager li,
  .btn-next {
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
  }
  .el-pager li.active {
    background: #2f98fa;
  }
  .el-pager li {
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
  }
  .el-pagination__sizes .el-input .el-input__inner {
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
    border: none;
  }
  .el-input--medium .el-input__inner {
    height: 26px;
    line-height: 26px;
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
  }
  .el-pagination__jump {
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #b9bed6;
  }
}
</style>
